<template>
  <div>
    <el-table :data="list" style="width: 100%" border>
      <el-table-column width="80">
        <el-table-column label="分县域" width="80" prop="name"></el-table-column>
      </el-table-column>
      <el-table-column label="当月新增">
        <el-table-column width="100" label="首贷户户数" prop="value1" />
      </el-table-column>
      <el-table-column label="当月用信情况">
        <el-table-column width="100" label="授信金额" prop="value2" />
        <el-table-column width="100" label="贷款余额" prop="value3" />
      </el-table-column>
      <el-table-column label="当月新增">
        <el-table-column width="100" label="首贷户户数" prop="value4" />
      </el-table-column>
      <el-table-column label="当月用信情况">
        <el-table-column width="100" label="授信金额" prop="value5" />
        <el-table-column width="100" label="贷款余额" prop="value6" />
      </el-table-column>
      <el-table-column width="100" label="累计">
        <el-table-column width="100" label="利率" prop="rate"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { Table, TableColumn } from "element-ui";
import { getFirstLoanStatistics5 } from "@/api/first-loan.js";
export default {
  name: "tab4",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  },
  props: {
    month: String
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    refreshTable() {
      getFirstLoanStatistics5(this.month)
        .then(res => {
          this.list = res;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  },
  watch: {
    month() {
      this.refreshTable();
    }
  },
  mounted() {
    this.refreshTable();
  }
};
</script>
<style lang="stylus" scoped></style>